<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:a4j="http://richfaces.org/a4j"
                 xmlns:rich="http://richfaces.org/rich"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <h:head>
        <style type="text/css">
            input[type = 'submit']{
                margin:5px 0px 5px 10px;
                padding:3px 5px 3px 5px;
            }
            .active-row {
                background-color: #FFEBDA !important;
                cursor: pointer;
            }
        </style>
    </h:head>
    <h:form id="budget">
        <rich:panel header="财务预算执行统计" styleClass="content-hight">
            <h:panelGrid columns="6">
                <h:outputText value="年度:"/>
                <h:selectOneMenu value="#{budgetStatsBean.iyear}">
                    <f:selectItem itemValue="" itemLabel=" - 请选择 - "/>
                    <f:selectItems value="#{budgetStatsBean.yearli}"/>
                    <a4j:ajax event="change" render="queryButton"/>
                </h:selectOneMenu>
                <h:outputText value="月份:"/>
                <h:selectOneMenu value="#{budgetStatsBean.imonth}">
                    <f:selectItem itemValue="" itemLabel=" - 请选择 - "/>
                    <f:selectItems value="#{budgetStatsBean.monthli}"/>
                    <a4j:ajax event="change" render="queryButton"/>
                </h:selectOneMenu>
                <a4j:commandButton value="查询" action="#{budgetStatsBean.queryDeptli}" render="tableGroup"
                                   onclick="this.disabled = 'true';" id="queryButton"
                                   disabled="#{empty budgetStatsBean.iyear or empty budgetStatsBean.imonth}"/>
                <h:commandButton id="ebutton" value="导出Excel" action="#{budgetStatsBean.exportExcelFor}"/>
            </h:panelGrid>
            <hr/>
            <h:panelGroup id="tableGroup">                
                <div style="max-width:750px;height:400px;overflow:auto;">
                    <rich:dataTable id="dataTable" value="#{budgetStatsBean.deptStatsli}" var="stats"
                                    noDataLabel="无数据!"
                                    style="width:100%;margin-bottom: 5px;"
                                    styleClass="stable">
                        <a4j:ajax event="rowdblclick"
                                  listener="#{budgetStatsBean.showDetail_bgt(stats)}"
                                  oncomplete="#{rich:component('pzxxPanel')}.show();"
                                  render="detailGroup"/>
                        <f:facet name="header">
                            <h:outputText value="#{budgetStatsBean.iyear}年度 - " rendered="#{budgetStatsBean.iyear != 0}"/>
                            财务预算执行统计
                        </f:facet>
                        <rich:column rendered="false">
                            <f:facet name="header">部门</f:facet>
                            <div style="max-width:100px;overflow: hidden;white-space:nowrap">
                                <h:outputText value="#{stats.deptName}"/>
                                <rich:tooltip value="#{stats.deptName}" rendered="#{not empty stats.deptName}"/>
                            </div>
                        </rich:column>
                        <rich:column>
                            <f:facet name="header">预算项目</f:facet>
                            <div style="max-width:100px;overflow: hidden;white-space:nowrap">
                                <h:outputText value="#{stats.finProjName}"/>
                                <rich:tooltip value="#{stats.finProjName}" rendered="#{not empty stats.finProjName}"/>
                            </div>
                        </rich:column>
                        <rich:column>
                            <f:facet name="header">内容及工作量</f:facet>
                            <div style="max-width:100px;overflow: hidden;white-space:nowrap">
                                <h:outputText value="#{stats.projName}"/>
                                <rich:tooltip value="#{stats.projName}" rendered="#{not empty stats.projName}"/>
                            </div>
                        </rich:column>
                        <rich:column style="width:120px;text-align: right">
                            <f:facet name="header">预算</f:facet>
                            <h:outputText value="#{stats.budget}">
                                <f:convertNumber pattern="#,##0.00" type="number"/>
                            </h:outputText>
                        </rich:column>
                        <rich:column style="width:120px;text-align: right">
                            <f:facet name="header">支出</f:facet>
                            <h:outputText value="#{stats.cost}">
                                <f:convertNumber pattern="#,##0.00" type="number"/>
                            </h:outputText>
                        </rich:column>
                        <rich:column style="width:70px;text-align: right">
                            <f:facet name="header">进度</f:facet>
                            <h:outputText value="#{stats.cost/stats.budget}" rendered="#{stats.budget != 0}">
                                <f:convertNumber type="percent" pattern="#0.00%"/>
                            </h:outputText>
                        </rich:column>
                        <rich:column style="width:120px;text-align: right">
                            <f:facet name="header">余额</f:facet>
                            <h:outputText value="#{stats.budget - stats.cost}">
                                <f:convertNumber pattern="#,##0.00" type="number"/>
                            </h:outputText>
                        </rich:column>
                    </rich:dataTable>
            <rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
            <rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
            <rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
            <rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
            <rich:jQuery selector=".stable tr" event="click" query="jQuery(this).addClass('click-row')"/>
            <rich:jQuery selector=".stable tr" event="click" query="jQuery('.stable tr').not(this).removeClass('click-row')"/>
                </div>
            </h:panelGroup>
        </rich:panel>
    </h:form>

    <rich:popupPanel id="pzxxPanel" width="600" height="400" resizeable="true">
        <f:facet name="header">凭证信息</f:facet>
        <f:facet name="controls">
            <h:outputLink value="#" onclick="#{rich:component('pzxxPanel')}.hide();
                                           return false;">关闭</h:outputLink>
        </f:facet>
        <h:form>
            <h:panelGroup id="detailGroup">                   
                <rich:dataTable id ="pzxxTable" value ="#{budgetStatsBean.pzxxli}" var ="tota"
                                onrowmouseover="this.style.backgroundColor='#F1F1F1'"
                                onrowmouseout="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                                rowClasses="list-row-odd,list-row-even"
                                style="width:100%;margin-bottom: 10px;"
                                styleClass="tableStyle"
                                noDataLabel="无数据！">
                    <rich:column style="width:100px;">
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="日期"/>
                            </h:panelGroup>
                        </f:facet>
                        <h:outputText value ="#{fn:substring(tota.pzrq,0,4)}年#{fn:substring(tota.pzrq,4,6)}月#{fn:substring(tota.pzrq,6,8)}日"/>
                    </rich:column>

                    <rich:column style="min-width:120px;">
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="摘要"/>
                            </h:panelGroup>
                        </f:facet>
                        <h:outputText value ="#{tota.zy}"/>
                    </rich:column>

                    <rich:column style="text-align: right;">
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="金额"/>
                            </h:panelGroup>
                        </f:facet>
                        <h:outputText value ="#{tota.je}" rendered="#{tota.jdbz eq '借'}">
                            <f:convertNumber type="number" pattern="#,##0.00"/>
                        </h:outputText>
                        <h:outputText value ="#{-tota.je}"  rendered="#{tota.jdbz eq '贷'}">
                            <f:convertNumber type="number" pattern="#,##0.00"/>
                        </h:outputText>
                    </rich:column>

                </rich:dataTable>
            </h:panelGroup>
        </h:form>
    </rich:popupPanel>
</ui:composition>